<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>响应式</title>
    <!-- <script src="./vue.global.js"></script> -->
    <!--引入vue2开发版本的vue核心包-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>

<!--
v-for 练习：绑定书架上的书，然后实现删除功能
-->

<body>
    <div id="app">
        <h3>小黑的书架</h3>
        <ul>
            <li v-for="(item,index) in books" :key="item.id">
                <span>{{item.name}}</span><span>{{item.id}}</span> <button v-on:click="remove(item.id)">删除</button>
            </li>

        </ul>
    </div>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                books: [{ id: 10, name: '红楼梦' }, { id: 23, name: '西游记' }, { id: 3, name: '水浒传' }, { id: 4, name: '三国演义' }]
            },
            methods: {
                remove(id) {
                    // 根据id删除使用filter方法 filter:根据条件，保留满足条件的对应项，得到一个新数组
                    this.books = this.books.filter(item => item.id != id)
                }
            }
        })
    </script>

</body>

</html>